<template>
  <div style="height: 100%">
    <my-header backBtn>
      <div slot="title">
        安全围栏
      </div>
      <div slot="right"  @click="quer">
      	确定
      </div>
    </my-header>

    <baidu-map class="bm-view"
               :style="'height:'+height+'px' "
               :zoom="zoom"
               :center="center"
               @ready="handlerMap"
               :scroll-wheel-zoom="true"
               ak="wpjzuT9FyGlqzF9ZeolLwmWZXRz2XZst">
      <bm-circle :center="intecenter" :radius="circlePath.radius" :stroke-color="stroke_color"
                 :stroke-opacity="stroke_opacity" :stroke-weight="stroke_weight" :editing="false" @lineupdate="updateCirclePath" ><!--@lineupdate="updateCirclePath"--></bm-circle>
      <bm-marker
        :top="true"
        :icon="icon"
        :position="circlePath.center"
        animation="BMAP_ANIMATION_BOUNCE">
      </bm-marker>
      <bm-marker
        :top="true"
        :icon="homeicon"
        :position="homeCirclePath.center"
        animation="BMAP_ANIMATION_BOUNCE">
      </bm-marker>
      <bm-marker
        :top="true"
        :icon="schoolicon"
        :position="schoolCirclePath.center"
        animation="BMAP_ANIMATION_BOUNCE">
      </bm-marker>
      <!--<bm-local-search :keyword="keyword" :autoViewport="true" :panel="false" :pageCapacity="1" @searchcomplete="searchcomplete" ></bm-local-search>-->




    </baidu-map>
    <!-- 底部菜单-->
    <div class="backgroundf5f5f5f" style="margin: 0px;">
        <div style="height: 10px"/>
        <div class="select_item_text" style="text-align: left;background: #fff;height: 45px;">
          <div style="padding: 10px;line-height: 30px;">
            <p style="float: left;">是否启用</p>
            <div style="float: right;">
              <label class="switch-btn">
                <input class="checked-switch" type="checkbox" :checked="checkedswitch" @click="typechecked"/>
                <span class="text-switch" data-yes="" data-no=""></span>
                <span class="toggle-btn"></span>
              </label>
            </div>
          </div>
        </div>
        <div class="small" style="height: 100%;">
            <div class="currency" style="margin-top: 10px;">
              <div style="padding: 10px;line-height: 30px;">
                <p style="float: left;">路线设置</p>
              </div>
            </div>
            <div class="currency">
              <div style="padding: 10px;height: 30px;">
                <p style="float: left;">家庭：</p>
                <div style="width: 80%;float: left;">
                  <div style="width: 80%;float: left;">
                    <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
                      <input placeholder="请输入地名关键字" readonly :value="homeCirclePath.name"
                             style="height: 26px; width: 100%;font-size: 14px;border: 1px solid #aaa;border-right: 0px solid #aaa"  @click="homeFn"/>
                    </bm-auto-complete>
                  </div>
                  <div style="width: 13%;margin: auto;float: left;border: 1px solid #aaa;border-left:0px solid #aaa;height: 26px;" @click="actionsheeton(1)">
                    <img src="../../../static/img/icon/icon25.png" width="3px" height="15px" style="margin: 6px auto auto 10px"/>
                  </div>
                </div>
              </div>
            </div>

            <div class="currency" >
              <div style="padding: 10px;height: 30px;">
                <p style="float: left;">学校：</p>
                <div style="width: 80%;float: left;">
                  <div style="width: 80%;float: left;">
                    <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
                      <input placeholder="请输入地名关键字" readonly :value="schoolCirclePath.name"
                             style="height: 26px; width: 100%;font-size: 14px;border: 1px solid #aaa;border-right: 0px solid #aaa" @click="schoolFn"/>
                    </bm-auto-complete>
                  </div>
                  <div style="width: 13%;margin: auto;float: left;border: 1px solid #aaa;border-left:0px solid #aaa;height: 26px" @click="actionsheeton(2)">
                    <img src="../../../static/img/icon/icon25.png" width="3px" height="15px" style="margin: 6px auto auto 10px"/>
                  </div>
                </div>
              </div>
            </div>

            <div style="width: 100%;text-align: left; background: #fff; ">
              <div style="padding: 10px;line-height: 30px;">
                <p style="float: left;">活动范围：{{h_meter}} 米</p>
                <div style="float: right;width: 10rem">
                  <input class="weui-input"  @keyup="loadNumber($event)" v-model="max_meter" style="width: 5rem;float: right;padding-top: 0.3rem" />
                  <p style="font-size: 1.5rem;float: right">最大:</p>
                </div>
              </div>
            </div>
            <div style="width: 100%;text-align: left; background: #fff; margin-top: 20px;">
              <div style="padding: 10px;line-height: 30px;">
                <input type="range"
                       v-model="q_value"
                       @change="queryFn" name="points" min="500" :max="max_meter" step="any" id="hpro" style="height: 20px; width: 100%;" />
              </div>
            </div>
        </div>
        <div class="backgroundf5f5f5f" style="height: 10px"/>
      <!--弹出框-->
      <div v-if="ahtype">
        <div class="weui-mask" @click="ahtype=false"></div>
        <div class="weui-actionsheet weui-actionsheet_toggle" >
          <div class="weui-actionsheet__menu">
            <div class="weui-actionsheet__cell" @click="queryAddress(actionsheet)">{{actionsheet.title}}</div>
            <div class="weui-actionsheet__cell" @click="delGpsAQ(actionsheet.type)" style="color: red">{{actionsheet.dtitile}}</div>
            <div class="weui-actionsheet__cell" @click="ahtype=false">取消</div>
          </div>
        </div>
      </div>

    </div>
  </div>



</template>
<script>
  import {BaiduMap, BmMarker, BmControl, BmLocalSearch, BmAutoComplete, BmCircle} from 'vue-baidu-map'
  import wx from "weixin-js-sdk";
  import Axios from 'axios/index'
  import Cookies from 'js-cookie';

  export default {
    components: {
      BaiduMap,
      BmMarker,
      BmControl,
      BmLocalSearch,
      BmAutoComplete,
      BmCircle
    },
    prop: {
      height: {
        type: String,
        default: '800'
      },
    },
    data() {
      let time = this.$getNowDate("date");
      return {
        icon: '',
        homeicon : {url:"@/../static/img/icon-home.png",size:{height:40,width: 40},opts: {imageSize: {height:40,width: 40}}},
        schoolicon:{url:"@/../static/img/icon-school.png",size:{height:40,width: 40},opts: {imageSize: {height:40,width: 40}}},
        max_meter:2500,
        ahtype:false,
        actionsheet:{
          type:'',
          title:'',
          dtitile:''
        },
        zoom: 17,
        student_id: '',
        height: document.body.clientHeight-350,
        width: document.body.clientWidth,
        center: '',
        polylinePath: [],
        keyword: '',
        userlocation:{lng:'', lat:''},
        checkedswitch:'true',
        circlePath: {
          center: {
            lng: '',
            lat: ''
          },
          radius: 500
        },
        homeCirclePath: {
          center: {
            lng: '',
            lat: ''
          },
          name:''
        },
        schoolCirclePath: {
          center: {
            lng: '',
            lat: ''
          },
          name:''
        },
        intecenter:{
          lng: '',
          lat: ''
        },
        q_value:'500',
        BMap:null,
        map:null,
        stroke_color:'blue',
        stroke_opacity:"0.5",
        stroke_weight:'2',
        overlayLabel:null,
        h_meter:500,
        local_type:0
      }
    },
    methods: {
      //文本框弹出触发事件，传入1位家庭，传入2为学校为参数赋值
      actionsheeton(e){
        if(e===1){
          this.actionsheet={
            title:this.homeCirclePath.name===""?"添加家庭地址":"修改家庭地址",
            dtitile:"删除家庭地址",
            type: 1
          }
        }else{
          this.actionsheet={
            title:this.schoolCirclePath.name===""?"添加学校地址":"修改学校地址",
            dtitile:"删除学校地址",
            type: 2
          }
        }
        this.ahtype=true;
      },
      //删除事件，根据当前状态值1位家庭，2为学校为
      delGpsAQ(s){
        let data = {};
        if(s===1){
          //数据组织清空家庭数据
          this.$http.securityfenceHomeBind({
            id : this.student_id,
            sfFamilyName : '',
            sfFamilyLng : '',
            sfFamilyLat : ''
          }).then(resp => {
            this.$weui.toast(resp.msg);
            //调用查询方法
            this.securityGpsfenceNum();
            //结束关闭弹窗
            this.ahtype=false;
          });
        }else{
          //数据组织清空学校数据
          this.$http.securityfenceSchoolBind({
            id : this.student_id,
            sfSchoolName : '',
            sfSchoolLng : '',
            sfSchoolLat : ''
          }).then(resp => {
            this.$weui.toast(resp.msg);
            //调用查询方法
            this.securityGpsfenceNum();
            //结束关闭弹窗
            this.ahtype=false;
          });
        }
        /*//提交修改数据
        this.$http.securityfenceBind(data).then(resp => {

        });*/
      },
      //页面跳转到选择地址
      queryAddress(e){
        this.$router.push({
          path:'/GpsAQ-Address',
          query:{
            addresstype : e.type,
            student_id : this.student_id,
            homeCirclePath : this.homeCirclePath,
            schoolCirclePath : this.schoolCirclePath
          }
        })
      },
      typechecked(e){
        console.log(e.currentTarget.checked);
        this.checkedswitch=e.currentTarget.checked;
      },
      searchcomplete(e) {
          this.$nextTick(() => {
            if (e && e.Hr) {
              this.center = e.Hr[0].point;  //这里获取了检索的位置并跳转
              //this.map.clearOverlays();  //这里进行清除所有的点
              this.circlePath.center = e.Hr[0].point;
              //this.circlePath.radius = 500;
              if(this.local_type == 1){
                this.homeCirclePath.center = e.Hr[0].point;
                this.homeCirclePath.name = e.Hr[0].title;
              } else if(this.local_type == 2){
                this.schoolCirclePath.center = e.Hr[0].point;
                this.schoolCirclePath.name = e.Hr[0].title;
              }
            }
          });
        },
        queryFn(e){
          let max = this.max_meter;
          this.q_value = e.target.value;
          //this.map.update();
          this.h_meter = parseInt(e.target.value);
          //this.circlePath.center = this.circlePath.center;
          this.circlePath.radius = this.h_meter;
          /*if(this.local_type == 1){
            this.homeCirclePath.radius = this.h_meter;
          } else if(this.local_type == 2){
            this.schoolCirclePath.radius = this.h_meter;
          }*/
        },
        schoolFn(e){
          this.local_type = 2;
          //切换数据
          let school = this.schoolCirclePath.name;
          //this.h_meter = this.schoolCirclePath.radius;
          if(school){
            this.center = this.schoolCirclePath.center;
            //this.q_value = this.schoolCirclePath.radius;
            //this.updateCirclePath();
          }

        },
        homeFn(e){
          this.local_type = 1;
          //切换数据
          let home = this.homeCirclePath.name;
          //this.h_meter = this.homeCirclePath.radius;
          if(home){
            this.center = this.homeCirclePath.center;
            //this.q_value = this.homeCirclePath.radius;
            //this.updateCirclePath();
          }
        },
        quer(){
          let home = this.homeCirclePath.name;
          let school = this.schoolCirclePath.name;
          if(!home || !school){
            this.$weui.topTips('请输入完整地址');
          }else{
            //计算中间坐标并保存
            this.getcenterpoiont(this.homeCirclePath.center, this.schoolCirclePath.center);
            this.submit();
          }
        },
      getcenterpoiont(center1,center2){
          let lng1 = center1.lng;
          let lat1 = center1.lat;

          let lng2 = center2.lng;
          let lat2 = center2.lat;

          let lngca = (Math.max(lng1,lng2)-Math.min(lng1,lng2))/2;
          let latca = (Math.max(lat1,lat2)-Math.min(lat1,lat2))/2;

          let lngcenter = Math.min(lng1,lng2)+lngca;
          let latcenter = Math.min(lat1,lat2)+latca;

          this.intecenter = new BMap.Point(lngcenter.toFixed(5),latcenter.toFixed(5));
        },
        submit(){
          //判断是否为空,数据传递
          //this.$weui.topTips(this.homeCirclePath.name);
          /*let home = this.homeCirclePath.name;
          let school = this.schoolCirclePath.name;
          if(!home || !school){
            this.$weui.topTips('请输入完整地址');
          } else{*/
            //数据组织
            let data = {
              id : this.student_id,
              sfFamilyName : this.homeCirclePath.name,
              sfFamilyLng : this.homeCirclePath.center.lng,
              sfFamilyLat : this.homeCirclePath.center.lat,
              sfSchoolName : this.schoolCirclePath.name,
              sfSchoolLng : this.schoolCirclePath.center.lng,
              sfSchoolLat : this.schoolCirclePath.center.lat,
              sfActivity : this.circlePath.radius,
              sfInteLat:this.intecenter.lat,
              sfInteLng:this.intecenter.lng,
              sfMax : this.max_meter,
              sfWhetherToEnable : this.checkedswitch
            }
            //数据提交f
            this.$http.securityfenceBind(data).then(resp => {
                this.$weui.toast(resp.msg);
            });
          //}

        },
        securityGpsfenceNum(){
          this.$http.securityfenceNum({id:this.student_id}).then(res=>{
            let data = res.data;
            this.homeCirclePath.name = data.sfFamilyName;
            this.homeCirclePath.center.lng = data.sfFamilyLng;
            this.homeCirclePath.center.lat = data.sfFamilyLat;
            this.schoolCirclePath.name = data.sfSchoolName;
            this.schoolCirclePath.center.lng = data.sfSchoolLng;
            this.schoolCirclePath.center.lat = data.sfSchoolLat;
            this.circlePath.center.lat = data.lat;
            this.circlePath.center.lng = data.lng;
            this.circlePath.radius = data.sfActivity===0?500:data.sfActivity;
            this.h_meter = data.sfActivity===0?500:data.sfActivity;
            this.q_value = data.sfActivity===0?500:data.sfActivity;
            this.max_meter = data.sfMax===0?2500:data.sfMax;
            this.intecenter.lat=data.sfInteLat;
            this.intecenter.lng=data.sfInteLng;
            this.checkedswitch = data.sfWhetherToEnable;
            //只要，调用中间坐标是否改变
            if(data.sfFamilyLng&&data.sfFamilyLat&&data.sfSchoolLng&&data.sfSchoolLat){
              //当前坐标
              this.getcenterpoiont(this.homeCirclePath.center, this.schoolCirclePath.center);
              //更新后坐标
              let h = this.intecenter;
              if(data.sfInteLat!==h.lat||data.sfInteLng!==h.lng){
                //有更新就重新提交
                this.submit();
              }
            }
          })
        },
        handlerMap({BMap, map}) {
          this.map = map;
          this.BMap = BMap;
          this.addControl();
        },
        addControl(){
          // 添加比例尺控件
          let scaleCtrl = new BMap.ScaleControl();
          // 添加比例尺控件
          this.map.addControl(scaleCtrl);
        },
        updateCirclePath (e) {
          //this.map.reload();
          // this.map.removeOverlay(e.target);
          if(this.overlayLabel != null){
            this.map.removeOverlay(this.overlayLabel);
          }
          //this.center = this.center;
          this.overlayLabel = new BMap.Circle(this.intecenter, this.q_value, {strokeColor:"blue",strokeWeight:2,strokeOpacity:0.5});
          this.map.addOverlay(this.overlayLabel);

          // this.circlePath.center = e.target.getCenter();
          // this.circlePath.radius = e.target.getRadius();

          // this.center = this.center;
          // this.circlePath.center = this.center;
          // this.circlePath.radius = this.q_value/10;

          //e.target.remove();
          //this.map.removeOverlay(e.target.overlay);
          // this.stroke_color='blue';
          // this.stroke_opacity=0.5;
          // this.stroke_weight=2;
          // this.circlePath.center = e.target.getCenter();
          // this.circlePath.radius = e.target.getRadius();
          //e.target.add();
          //this.map.addOverlay(e.target);
        }
    },
    mounted() {
      let data = this.$route.query;

      this.student_id = data.id;
      //this.userlocation = local.getResults().getPoi(0).point;
      this.center = {lng:data.lng, lat:data.lat};
      this.icon = data.icon;
      this.securityGpsfenceNum();

    },
    created() {
    }
  }
</script>
<style scoped>
  .footer2{
    height: 50%;
    width: 100%;
    margin-top: 100%;
    background: #fff;
  }
  .bm-view {
    width: 100%;
    height: 100%;
  }

  /* toggle switch css start */
  .switch-btn {position: relative; display: block; vertical-align: top; width: 40px; height: 20px; border-radius: 18px; cursor: pointer;}
  .checked-switch {position: absolute; top: 0; left: 0; opacity: 0;}
  .text-switch {background-color: #ed5b49; border: 1px solid #d2402e; border-radius: inherit; color: #fff; display: block; font-size: 15px; height: inherit; position: relative; text-transform: uppercase;}
  .text-switch:before, .text-switch:after {position: absolute; top: 50%; margin-top: -.5em; line-height: 1; -webkit-transition: inherit; -moz-transition: inherit; -o-transition: inherit; transition: inherit;}
  .text-switch:before {content: attr(data-no); right: 11px;}
  .text-switch:after {content: attr(data-yes); left: 11px; color: #FFFFFF; opacity: 0;}
  .checked-switch:checked ~ .text-switch {background-color: #00af2c; border: 1px solid #068506;}
  .checked-switch:checked ~ .text-switch:before {opacity: 0;}
  .checked-switch:checked ~ .text-switch:after {opacity: 1;}
  .toggle-btn {background: linear-gradient(#eee, #fafafa); border-radius: 100%; height: 20px; left: 1px; position: absolute; top: 1px; width: 20px;}
  .toggle-btn::before {color: #aaaaaa; content: ""; display: inline-block; font-size: 12px; letter-spacing: -2px; padding: 4px 0; vertical-align: middle;}
  .checked-switch:checked ~ .toggle-btn {left: 19px;}
   .text-switch, .toggle-btn {transition: All 0.3s ease; -webkit-transition: All 0.3s ease; -moz-transition: All 0.3s ease; -o-transition: All 0.3s ease;}

  /*= add for "no-radius" =*/
  .no-radius, .no-radius .toggle-btn{border-radius: 0;}
  /*= add for "no-radius" end =*/

  /*= add for "top-to-bottom" =*/
  .circle-style .toggle-btn::before{background: linear-gradient(#dedede, #cacaca); border-radius: 50%; content: ""; height: 14px; margin-top: 6px; padding: 0; width: 14px;}
  /* add for "top-to-bottom" end */

  /* toggle switch css end */
  .select_item_text {
    width: calc(100% - 2rem);
    height: 5.4rem;
    line-height: 5.4rem;
    margin: 0 auto auto 1rem;
    background: #FFFFFF;
    border-radius: 6px;
    font-size: 1.6rem;
    padding: 0 1rem;
    box-sizing: border-box;
    justify-content: space-between;
  }
  .small{
    width: calc(100% - 2rem);
    margin: 0 auto auto 1rem;
    background: #FFFFFF;
    border-radius: 6px;
    font-size: 1.6rem;
    padding: 0 1rem;
    box-sizing: border-box;
    justify-content: space-between;
  }
  .backgroundf5f5f5f{
    background: #f5f5f5;
  }
  .currency{
    width:100%;height:45px;text-align: left; background: #fff;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
  }

</style>
